<template>
  <ul>
    <!-- <li v-for="item in treeData">
      {{ item.name }}

      <ul>
        <li v-for="child in item.children">
          {{ child.name }}

          <ul>
            <li v-for="childchild in child.children">
              {{ childchild.name }}

              <ul>
                <li v-for="childchildchild in childchild.children">
                  {{ childchildchild.name }}
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li> -->

    <tree-item v-for="item in treeData" :data="item" />
  </ul>
</template>

<script>
import TreeItem from "./components/tree-item.vue";

export default {
  components: {
    TreeItem,
  },

  data() {
    return {
      treeData: [
        {
          name: "张三",
          children: [
            {
              name: "张三 - 1",
              children: [
                {
                  name: "张三 - 1 - 1",
                  children: [
                    {
                      name: "张三 - 1 - 1 - 1",
                    },
                  ],
                },
              ],
            },
            {
              name: "张三 - 2",
            },
          ],
        },
        {
          name: "李四",
          children: [
            {
              name: "李四 - 1",
            },
            {
              name: "李四 - 2",
            },
          ],
        },
      ],
    };
  },
};
</script>
